<html>
  <head>
    <script type="text/javascript" src="../../src/gew.js">
    </script>
    <!--shader-->
    <script id="hello_webGL_vs" type="x-shader/x-vertex">
      attribute vec2 position;
      attribute vec2 texCoord0;
      uniform vec2 canvasSize;
      varying vec2 oTexCoord0;
      void main(void)
      {
        gl_Position = vec4(position.x/canvasSize.x -1.0,(-position.y)/canvasSize.y+1.0,0.0,1.0);
        oTexCoord0 = texCoord0;
      }
    </script>
    <script id="hello_webGL_fs" type="x-shader/x-fragment">
      varying vec2 oTexCoord0;
      uniform vec4 color;
      uniform sampler2D texture0;
      //uniform sampler2D texture1;
      void main(void)
      {
        gl_FragColor = texture2D(texture0, oTexCoord0.st)*color;
      }
    </script>
    <script type="text/javascript">
      var testScreenIdx = 0;
      var elapseMls = 0;
      var frameCount = 0;
      function MyScreen(game)
      {
        gewScreen.call(this, game);
        this.scene2d = new gewScene2D(this.game);
        this.onTick = function(mls)
        {
          var manager = this.game.textureManager;
          var gl = this.game.gl;
          var tex2 = manager.textureList.secondTex;
          var objectList = this.scene2d.layer0.objectList;
          for (var i = 0; i < 30 * 30; i++) 
          {
            var sprite = objectList[i];
            if (sprite) 
            {
              if (!sprite.spd) 
              {
                var v = new gewVec2();
                v.x = 0.5 - Math.random();
                v.y = 0.5 - Math.random();
                v.normalize();
                sprite.spd = v;
              }
              sprite.translate(sprite.spd.x, sprite.spd.y);
              //sprite.setPosition( sprite.x+ sprite.spd.x,sprite.y+ sprite.spd.y);
            }
          }
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
          this.scene2d.render();
          elapseMls += mls;
          frameCount++;
          if (elapseMls >= 2000) 
          {
            var fps = frameCount / 2;
            document.getElementById("fps").innerHTML = "Frame Rate:" + fps;
            elapseMls = 0;
            frameCount = 0;
          }
        }
        this.init = function()
        {
          var gl = this.game.gl;
          //gl.activeTexture(gl.TEXTURE0);
          //Load texture
          var manager = this.game.textureManager;
          manager.loadTexture("atlat0", "Resource/atlas0.png");
          manager.loadTexture("atlat1", "Resource/atlas1.png");
          var mainTexList = [];
          mainTexList[0] = manager.textureList['atlat0'];
          mainTexList[1] = manager.textureList['atlat1'];
          manager.loadTextureAtlas("test", "Resource/atlas.tai", mainTexList);
          var atlas = manager.textureAtlasList.test;
          this.scene2d.atlas = atlas;
          for (var j = 0; j < 30; j++) 
            for (var i = 0; i < 30; i++) 
            {
              var rec = new gewSprite2D(this.game);
              rec.setAsRectangle(200, 200, 100, 100)
              rec.setSubTexture("Officer_SwatVan.png");
              this.scene2d.layer0.insert(rec);
            }
        }
        this.isDrag = false;
        this.onMouseDown = function(e)
        {
          this.isDrag = true;
        }
        this.onMouseMove = function(e)
        {
          if (this.isDrag) 
            console.log("move move");
        }
        this.onMouseUp = function(e)
        {
          this.isDrag = false;
        }
      }
      
      function main()
      {
        var game = new gewGame("cavans_id");
        var blackScreen = new MyScreen(game);
        game.addScreen(blackScreen, testScreenIdx);
        game.setScreen(testScreenIdx);
        blackScreen.init();
        setInterval(function()
        {
          game.run()
        }, 10);
      }
    </script>
  </head>
  <body onload="main()">
    <div style="text-align: center">
      <!-- this is the canvas that we render to -->
      <canvas id="cavans_id" width="640" height="480">
      </canvas>
      <!-- a convenient div to use to display log messages -->
      <div id="fps">
      </div>
      <a>Dont see anything? Get FireFox 3.7 and enable webGL feature ( about:config >> set webGL.. param to true )</a>
    </div>
  </body>
</html>
